<template>
	<view class="container">
		<view class="iner">基本信息</view>
		<view class="returnGoods">
			<view class="headerNumber" style="border: 1rpx solid #e8e8e8;">
				<view style="font-size: 24rpx;">出库类型</view>
				<view style="font-size: 26rpx;color: #999999 ;">退货出库</view>
			</view>
			<view class="headerNumber" @click="orderShow=true">
				<view style="font-size: 24rpx;">关联采购单号</view>
				<view style="font-size: 26rpx;color: #999999 ;">
					<view v-if="order">{{order}}</view>
					<view v-else>请选择采购单号></view>
				</view>
			</view>
		</view>
		
		<view class="iners">
			
		</view>
		<view class="material" v-if="materials.length>0">
			<!-- 主要原料 -->
			<view class="picking" v-for="(item,index) in materials" :key="index">
				<view class="pickingTitles" style="margin-bottom: 20rpx;">
					<view class="flex">
						<span>货品{{index+1}}：</span>
						<span style="color: #999999 ;">{{item.name}}</span>
					</view>
					<view style="display: flex;align-items: center;">
						<image @click="handeleRemoveGoods(index)" style="width: 34rpx;height: 34rpx;" src="/static/work/cg_del.png"
							mode=""></image>
					</view>
				</view>
				<view v-for="(item1,index1) in item.chile" :key="index1">
					<view class="selectBlock" >
						<view class="select" @click="handeleLibrary(index,index1)">
							<view v-if="item1.name" class="lib">{{item1.name}}</view>
							<view v-else style="color: #999999 ;">选货位</view>
							<image style="width: 16rpx;height: 16rpx;" src="/static/work/bottom.png" mode=""/>
						</view>
						<view class="select" @click="handeleShow(index,index1)">
							<view v-if="item1.title" class="lib">{{item1.title}}</view>
							<view style="color: #999999;" v-else>选批次</view>
							<image style="width: 16rpx;height: 16rpx;" src="/static/work/bottom.png" mode=""/>
						</view>
						<view class="selectActive">
							<input type="number" style="font-size: 24rpx;display: flex;align-items: center;" v-model="item1.num"
								placeholder-style="font-size:24rpx;" placeholder="请输入数量">
							<view style="font-size: 24rpx;">kg</view>
						</view>
						<view class="selectImage" v-if="item.chile.length>1"  @click="handeleRemoveMaterials(index,index1)">
							<image style="width: 34rpx;height: 34rpx;" src="/static/work/cg_add04.png" mode=""/>
						</view>
					</view>
				</view>
				<view @click="handeleAddMaterials(index)" style="display: flex;align-items: center;width: 100%;height: 80rpx;justify-content: center;">
					<image  style="width: 28rpx;height: 28rpx;" src="/static/work/cg_add01.png"
						mode=""></image>
					<view style="font-size: 24rpx;color: #177A77 ;margin-left: 15rpx;">增加货位</view>
				</view>
				
			</view>
		</view>
		<view class="addGoods" @click="handeleAddGoods">
			<image style="width: 28rpx;height: 28rpx;margin-bottom: -8rpx;" src="/static/work/cg_add01.png" mode=""></image>
			<view style="margin-left: 15rpx;">新增商品</view>
		</view>
		<view class="submit">
			<u-button :loading='loading' :disabled="disabled" :custom-style="customStyleBtn1" @click="submit">确认出库</u-button>
		</view>
		<!-- 采购单号 -->
		<u-picker :show="orderShow" :columns="orders" @cancel="orderShow=false" keyName="label" @confirm="handeleOrders"></u-picker>
		<!-- 仓库 -->
		<u-picker :show="libraryShow" ref="uPicker" @cancel="libraryShow=false" :columns="columnslibrary" @confirm="confirm" @change="changeHandler"></u-picker>
		<!-- 批次 -->
		<u-picker :show="show" :columns="columns" keyName="label" @confirm="handelConfirmPC" @cancel="show=false"></u-picker>
		<!-- 新增商品 -->
		<u-picker :show="goodsShow" :columns="goods" keyName="label" @cancel="goodsShow=false" @confirm="handelGoods"></u-picker>
		<Warehouse @setValueName="handleSetValueName"  ref="warehouseRef"/>
	</view>
</template>

<script>
	import Warehouse from '@/components/Warehouse.vue'
	import {
		constructGroups
	} from '../../../utils/common.js'
	export default {
		components:{
			Warehouse
		},
		data() {
			return {
				orderShow:false,//采购单号
				customStyleBtn1: {
					width: '690rpx',
					height: '90rpx',
					borderRadius: '45rpx',
					background: "linear-gradient(0deg, #177A77, #4B9C6D)",
					fontSize: '28rpx',
					fontWeight: 400,
					color: '#ffffff',
					border: 'none'
				},
				orders:[
					[{
						label: 'CG20250201001',
						id: 2021
									
					}, {
						label: 'CG20250201002',
						id: 804
					},{
						label: 'CG20250201003',
						id: 802
					},{
						label: 'CG20250201004',
						id: 801
					}
					]
				],//采购单号
				order:'',//单号
				materials: [],//商品
					
				columnslibrary: [],//仓库一级数据
				columnData: [],//仓库二级数据
				arr:[ //测试的假数据
					{id: 1,name: '动物'},
					{parentId: 1,name: '鬣狗'},
					{parentId: 1,name: '大象'},
					{parentId: 1,name: '猴子'},
					{parentId: 1,name: '卡皮巴拉'},
					{id:2,name:'颜色'},
					{parentId: 2,name: '赤色'},
					{parentId: 2,name: '橙色'},
					{parentId: 2,name: '黄色'},
					{parentId: 2,name: '绿色'},
					{id:3,name:'时间'},
					{parentId: 3,name: '上午'},
					{parentId: 3,name: '中午'},
					{parentId: 3,name: '下午'},
					{id:4,name:'哈西大仓库'},
					{parentId: 4,name: '大货位1'},
					{parentId: 4,name: '大货位2'},
					{parentId: 4,name: '大货位3'},
				],
				disabled:true,//按钮
				loading: false,//按钮
				libraryShow:false, //控制选择仓库弹窗
				hostIndex:0,//主选择ID
				assistIndex:0,//辅选择ID
				index:0,//选择主还是辅
				columns: [ //批次
					[{
						label: '雪月夜',
						id: 2021

					}, {
						label: '冷夜雨',
						id: 804
					}]
				],
				goods: [ //商品
					[{
						label: '土豆',
						id: 2021
				
					}, {
						label: '黄瓜',
						id: 804
					},{
						label: '豆角',
						id: 802
					},{
						label: '白菜',
						id: 801
					}
					]
				],
				show: false,
				goodsShow:false
			}
		},
		onLoad() {
			this.getData()
		},
		methods: {
			// 获取数据
			getData(){
				let objs = constructGroups(this.arr)
				this.columnslibrary = objs.columns
				this.columnData = objs.columnData
			},
			// 选择采购单号
			handeleOrders(e){
				this.order = e.value[0].label
				this.disabled = false
				this.orderShow = false
			},
			// 新增商品
			handelGoods(e){
				let arr = {
					name:e.value[0].label,
					id:e.value[0].id,
					chile:[
						{
						id:0 ,
						name: '',
						nameID: 0,
						title: '',
						num:''	
						}
					]
				}
				this.materials.push(arr)
				this.goodsShow = false
			},
			// 新增商品
			handeleAddGoods(){
				if(this.order){
					this.goodsShow = true
				}else{
					uni.showToast({
						title:'请选择采购单号',
						icon:'none'
					})
				}
				
				
			},
			// 确认领料
			submit() {
				this.loading = true
			},
			// 批次确定
			handelConfirmPC(e){
				this.materials[this.index].chile[this.assistIndex].title = e.value[0].label
				this.show = false
			},
			
			// 选择仓库确定
			confirm(e){
				this.materials[this.index].chile[this.hostIndex].name = e.value[0]+'/'+e.value[1]
				this.libraryShow = false
			},
			// 选择主仓库，或辅料仓库
			handeleLibrary(index,hostIndex){
				let arr = [
					{id:'1',title:'第1'},
					{id:'2',title:'第2'},
					{id:'3',title:'第3'},
					{id:'4',title:'第4'},
					{id:'5',title:'第5'},
				]
				this.$refs.warehouseRef.handleIsShow(JSON.stringify(arr))
			
			},
			changeHandler(e) {
				const {
					columnIndex,
					value,
					values, // values为当前变化列的数组内容
					index,
					// 微信小程序无法将picker实例传出来，只能通过ref操作
					picker = this.$refs.uPicker
				} = e
				// 当第一列值发生变化时，变化第二列(后一列)对应的选项
				if (columnIndex === 0) {
					// picker为选择器this实例，变化第二列对应的选项
					picker.setColumnValues(1, this.columnData[index])
				}
			},
			// 点击批次弹窗
			handeleShow(index,assistIndex){
				this.index = index
				this.assistIndex = assistIndex 
				this.show = true
			},
			handeleRemoveGoods(index){
				uni.showModal({
					title: '提示',
					content: '确认删除此条信息？',
					success: res => {
						if (res.confirm) {
							this.materials.splice(index,1)
						}
					}
				});
			
			},
			// 增加主原料
			handeleAddMaterials(index) {
				this.materials[index].chile.push(
					{
					id:0 ,
					name: '',
					nameID: 0,
					title: '',
					num:''	
					}
				)
			},
			// 删除主原料
			handeleRemoveMaterials(index,index1) {
				uni.showModal({
					title: '提示',
					content: '确认删除此条信息？',
					success: res => {
						if (res.confirm) {
							this.materials[index].chile.splice(index1,1)
						}
					}
				});
			},
			// 子原料1
			handeleAddOne() {
				this.auxiliaryMaterials.push({
					id: '123',
					id: '123',
					id: '123',
				})
			},
			// 删除辅料
			handeleRemoveOne(index) {
				uni.showModal({
					title: '提示',
					content: '确认删除此条信息？',
					success: res => {
						if (res.confirm) {
							this.auxiliaryMaterials.splice(index, 1)
						}
					}
				});
			},
			handeleLibrary(index,hostIndex){
				
				this.$refs.warehouseRef.handleIsShow([],false)
			
			},
			// 仓库组件获取选中的仓库数据
			handleSetValueName(val){
				console.log('仓库组件获取选中的仓库数据:',val);
			}
		}
	}
</script>

<style scoped>
	.addGoods{
		margin-top: 20rpx;
		width: 750rpx;
		height: 100rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		color: #177A77 ;
		font-size: 26rpx;
	}
	.returnGoods{
		width: 750rpx;
		min-height: 200rpx;
	}
	.lib{
		width: 140rpx;
		text-overflow: ellipsis;
		    overflow: hidden;
		    word-break: break-all;
		    white-space: nowrap;
	}
	.selectImage {
		width: 58rpx;
		height: 58rpx;
		display: flex;
		align-items: center;
		justify-content: flex-end;
	}
	
	.selectBlock {
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin-bottom: 18rpx;
	}
	
	.select {
		flex: 1;
		height: 60rpx;
		border: 1px solid #EBEBEB;
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin-right: 19rpx;
		padding: 0rpx 21rpx;
		box-sizing: border-box;
		font-size: 24rpx;
	}
	.selectActive {
		flex: 1;
		height: 60rpx;
		border: 1px solid #EBEBEB;
		display: flex;
		align-items: center;
		padding: 0 21rpx;
		box-sizing: border-box;
	}
	
	.pickingTitles {
		font-size: 24rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
	}
	.flex {
		display: flex;
		align-items: center;
	}
	
	.pickingTitle {
		font-size: 24rpx;
		margin-bottom: 30rpx;
		display: flex;
		align-items: center;
	}
	.pickingActive {
		width: 750rpx;
		min-height: 200rpx;
		background-color: #FFFFFF;
		padding: 20rpx 30rpx;
		box-sizing: border-box;
	}
	.picking {
		width: 750rpx;
		min-height: 200rpx;
		background-color: #FFFFFF;
		padding: 43rpx 30rpx 21rpx 30rpx;
		box-sizing: border-box;
		margin-bottom: 10rpx;
	}
	.submit {
		width: 100%;
		position: relative;
		margin-top: 97rpx;
		margin-bottom: 100rpx;
	}
	.material{
		width: 750rpx;
		min-height: 130rpx;
		padding: 0rpx 29rpx 0rpx 30rpx;
		box-sizing: border-box;
		display: flex;
		flex-direction: column;
		align-items: center;
	}
	.iners{
		width: 750rpx;
		height: 21rpx;
		display: flex;
		align-items: center;
		padding: 0 37rpx;
		box-sizing: border-box;
		font-size: 24rpx;
	}
	.headerNumber {
		width: 750rpx;
		height: 100rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 0 27rpx 0 30rpx;
		box-sizing: border-box;
		background-color: #FFFFFF;
	}
	
	.iner {
		width: 750rpx;
		height: 60rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 0 37rpx;
		box-sizing: border-box;
		font-size: 24rpx;
	}
	.container {
		width: 750rpx;
		height: 100vh;
		display: flex;
		flex-direction: column;
		align-items: center;
		background-color: #F8F8F8;
	}
	
	page {
		background-color: #F8F8F8;
	}
</style>